<template>
  <el-row>
    <el-col :span="12">
      <el-row style="display: flex; flex-direction: column;">
        <el-descriptions :column="1" size="default" title="发起流程信息">
          <el-descriptions-item v-for="(key, index) in Object.keys(props.processStartFormData)" :key="index"
            :label="key + '：'" label-align="right" label-class-name="description-label">{{
              props.processStartFormData[key] }}</el-descriptions-item>
        </el-descriptions>
        <el-empty v-if="Object.keys(props.processStartFormData).length < 1" description="未查询到数据" :image-size="100" />
      </el-row>
      <el-row>
        <div><el-text tag="b" size="large" style="color: #303133">流程图</el-text></div>
        <BpmnViewer :flowData="props.flowData" :processInstance="props.processInstance"></BpmnViewer>
      </el-row>
    </el-col>
    <el-col :span="12">
      <el-text tag="b" size="large" style="color: #303133">审批流程信息</el-text>
      <el-timeline style="margin-top: 20px;">
        <el-timeline-item v-for="(activity, index) in props.processInstance.slice(0, -1)" :key="index" icon="MoreFilled"
          type="success" hide-timestamp>
          {{ activity.taskName }}
          <el-card shadow="hover" style="width: 80%;">
            <el-text>
              <el-icon>
                <UserFilled />
              </el-icon>
              审批人员：{{ activity.assigneeName }}
              <el-tag type="primary">
                {{ activity.assigneeDeptName }}
              </el-tag>
            </el-text><br>
            <el-text>
              <el-icon>
                <Comment :color="['1', '4', '5', 'comment'].includes(activity.comment?.type) ? '' : '#F8525E'" />
              </el-icon>
              {{ comment[activity.comment?.type] || "审批意见" }}：
              {{ activity.comment?.comment }}</el-text><br>
            <el-text>
              <el-icon>
                <Stopwatch />
              </el-icon>
              消耗时长：{{ activity.duration }}</el-text><br>
            <el-text>
              <el-icon>
                <Timer />
              </el-icon>
              开始时间：{{ activity.createTime }}</el-text><br>
            <el-text>
              <el-icon>
                <Timer />
              </el-icon>
              结束时间：{{ activity.finishTime }}</el-text>
          </el-card>
        </el-timeline-item>
        <el-timeline-item v-for="(activity, index) in props.processInstance.slice(-1,)" :key="index" icon="SemiSelect"
          type="primary" hide-timestamp>
          {{ activity.taskName }}
          <el-card shadow="hover" style="width: 80%;">
            <el-text>
              <el-icon>
                <UserFilled />
              </el-icon>
              审请人员：{{ activity.assigneeName }}
              <el-tag type="primary">
                {{ activity.assigneeDeptName }}
              </el-tag>
            </el-text><br>
            <el-text>
              <el-icon>
                <Timer />
              </el-icon>
              开始时间：{{ activity.createTime }}</el-text><br>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-col>
  </el-row>
</template>

<script setup>
import BpmnViewer from '../start/BpmnViewer.vue';
import { comment } from '@/constants/flowable.js'
const props = defineProps({
  processStartFormData: { type: Object, default: () => ({}) },
  flowData: { type: Object, default: () => ({}) },
  processInstance: { type: Array, default: () => [] },
});
</script>

<style lang="less" scoped></style>